<template>
    <form @submit="login">
    <div class='login'>
        <div class="logo"></div>
        <div class='title'>让汽车交易更简单</div>
        <div class="login_block">
            <div class="number">
                 <input placeholder="账号" name="phoneNumber"   type="number" maxlength="11" auto-focus/>
            </div>
            <div class="padword"> <input placeholder="密码"  name="password" confirm-type="done" password maxlength="11" auto-focus/></div>
       </div>

       <div class="login_button"><button formType="submit">登陆</button></div>
        <div class="ipone">400-1600-790</div>
    </div>
    </form>

</template>


<script>
import {mapActions} from "vuex";
export default {
    data(){
        return {
            code:"" 
        }
    },
    created(){
        //有token直接跳转到首页
       if( wx.getStorageSync("token") ){
            wx.switchTab({url	:'pages/index/main'});
            return false;
       }
       
        let _this = this ;
        wx.login({timeout:2000,success(res){_this.code =   res.code }})

    },
    methods:{
        login(e){
            let user = e.mp.detail.value;
                user.code = this.code;
                //18701729257 
            this.$https.postJson("user/login",user).then(res=>{
                const token = res.data.data;
                //获取到token后存到本地
                wx.setStorageSync( "token",token)
                this.get_token(wx.getStorageSync("token") );
            //跳转到首页
            wx.switchTab({url:'/pages/index/main'})
            })
        },
        ...mapActions(["get_token"])
    }
}
</script>

<style lang="scss" scoped>
    .login{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    .logo{
        width:150rpx;
        height: 150rpx;
        margin:90rpx auto 30rpx;
        background:url("../../../static/images/logo.png") no-repeat;
        background-size: contain;
    }
    .title{
        font-size: 24rpx;
        color:#666;
        text-align: center;
    }
    .login_block{
        width:560rpx;
        line-height: 75rpx;
        margin:140rpx auto 0; 
         font-size: 32rpx;
        color: #aaa;
        .number{
           position: relative;
           padding-left:60rpx;
           margin-bottom:100rpx;
        }
        .number:before{
            content: "";
            width: 39rpx;
            height: 40rpx;
            position: absolute;
            top:0;
            bottom:0;
            margin:auto 0;
            left:0;
            background:url("../../../static/images/number.png") no-repeat;
            background-size: cover;
        }
        .padword{
                position: relative;
                padding-left:60rpx;
                margin-bottom:100rpx; 
        }
        .padword:before{
            content: "";
            width: 33rpx;
            height: 40rpx;
            position: absolute;
            top:0;
            bottom:0;
            margin:auto 0;
            left:0;
            background:url("../../../static/images/padword.png") no-repeat;
            background-size: cover;
        }

    }

    .login_button{
        width: 550rpx;
        height: 90rpx;
        line-height: 90rpx;
        border-radius: 200rpx;
        margin:0 auto;
        button{
        background-color: #595856;
        font-size: 32rpx;
        font-weight: bold;
        color:#fff;
        border-radius: 200rpx;
        }
    }
    .ipone{
        color:#333333;
        font-size: 28rpx;
        padding-left:40rpx;
        width: 200rpx;
        margin:0 auto;
        position: fixed;
        bottom:40rpx;
        left:0;
        right:0;
        
    }
    .ipone:before{
            content: "";
            width: 24rpx;
            height: 28rpx;
            position: absolute;
            top:0;
            bottom:0;
            margin:auto 0;
            left:0;
            background:url("../../../static/images/ipone.png") no-repeat;
            background-size: cover;
    }
    }
</style>

